<template>
  <div>
    <HomeBaner :banderList="banderList"></HomeBaner>
    <div class="content">
      <div class="left">  
          <HomeLeft :menuList="menuList"></HomeLeft>
        <!-- 购物车图标 -->
        <router-link to="/index/shoppingCart" tag="a">
          <van-icon
            class="left_icon"
            size="40"
            :badge="shopCarNum"
            color="#1989fa"
            name="cart-circle-o"
          />
        </router-link>
      </div>
      <div class="right">
        <HomeRight @shop-car="shopCar"> </HomeRight>
      </div>
    </div>
  </div>
</template>

<script>
import {
  HomeLeftMenu,
  HomeBander,
  HomeRightProduct,
} from "@/network/home/home.js";
import { AddShopCar, GetShopList } from "@/network/shop/shop.js";
import HomeBaner from "@/components/Home/HomeBaner.vue";
import HomeLeft from "@/components/Home/HomeLeft.vue";
import HomeRight from "@/components/Home/HomeRight.vue";
import bScroll from "@/components/bScroll/bScroll.vue";
import { ContactList } from "vant";
export default {
  components: {
    HomeLeft,
    HomeBaner,
    HomeRight,
    bScroll,
  },
  data() {
    return {
      loading: false,
      finished: false,
      //轮播图
      banderList: [],
      //左侧菜单数据
      menuList: [],
      //购物车的数量
      shopCarNum: 0,
    };
  },
  created() {
   
   
    this.getHomeBander();
    this.getMenu();
    this.shopCar();
  },
  activated() {
    this.shopCar();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  methods: {
    //加载轮播图
    async getHomeBander() {
      const { data: res } = await HomeBander();
      this.banderList = res.table;
    },
    //加载左侧菜单数据
    async getMenu() {
      const { data: res } = await HomeLeftMenu();
      this.menuList = res.table;
    },
    //购物车数量
    shopCar() {
      this.shopCarNum = JSON.parse(localStorage.getItem("shopCar")).length;
    },
  },
  beforeRouteEnter(to, from, next) {
      if(window.location.search!=""){
         let url=`http://192.168.1.15:8080/#/index/pay${window.location.search}`
         window.location.assign(url);
      }
      next()
  }
};
</script>
<style scoped lang="less">
@import "../assets/css/index.less";
.content {
  height: 100vw;
  display: flex;
  margin: 0px;
}

.left_icon {
  margin-left: 80 * @vw;
  margin-top: 100 * @vw;
}
.right {
  height: 100vw;
  margin-left: 40 * @vw;
}
</style>